<template>
  <div class="fatie">
    <div class="release">
      <p class="p-left">
        <button @click="cancelHandle">取消</button>
      </p>
      <p class="p-right">
        <button
          class="btn"
          @click="saveHandle"
        >
          发布
        </button>
      </p>
    </div>
    <div class="conent">
      <input
        type="text"
        class="txt"
        v-model="name"
      />
      <textarea
        v-model="content"
        cols="40"
        rows="10"
        placeholder="请输入内容"
      >
      </textarea>
      <input
        type="file"
        style="display: none"
        ref="fileTag"
        @change="selEnd"
      />
      <img
        :src="dalImg(imgUrl)"
        alt="头像"
        @click="selImg"
      />
    </div>
  </div>
</template>
<style scoped>
.release {
  width: 90%;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
}
.p-left {
  font-size: 22px;
}
.p-left button {
  border: none;
  background-color: white;
}
.p-right {
  width: 80px;
  height: 45px;
  border: 1px solid #cecece;
  background-color: rgba(255, 166, 0, 0.638);
  text-align: center;
  line-height: 45px;
  border-radius: 20px 20px;
}
.p-right .btn {
  border: none;
  background-color: rgba(255, 166, 0, 0.086);
}
.conent {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #cecece;
}
.conent textarea {
  border: none;
}
</style>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { fabuAPI } from "../services/auth";
import { dalImg } from "../utils/tools";
import axios from "../utils/request";
const router = useRouter();

const name = ref("");
const content = ref("");
const imgUrl = ref("");
const fileTag = ref();

const saveHandle = () => {
  if (name.value && content.value) {
    fabuAPI({
      name: name.value,
      content: content.value,
      img: imgUrl.value,
    }).then(() => {
      router.push({ name: "Play" });
    });
  } else {
    alert("请输入内容");
  }
};
//选择图片
const selImg = () => {
  fileTag.value.click();
};
const selEnd = () => {
  console.log(fileTag.value.files[0]);
  const formData = new FormData();
  formData.append("file", fileTag.value.files[0]);
  axios.post("/api/goods/upload/avatar", formData).then((res) => {
    imgUrl.value = res.data;
    console.log(res.data);
  });
};

const cancelHandle = () => {
  router.go(-1); // -1表示返回上一个
};
</script>
